<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 179001241 刘涛 */
        .show1,
        .show2,
        .show3 {
            width: 600px;
            height: 60px;
            border: 1px solid black;
            word-wrap:break-word;
        }

        input {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="show1" id="show1"></div>
    <input type="button" value="删除January(1)" id="del1"><input type="button" value="删除December(12)" id="del2">
    <div class="show2" id="show2"></div>
    <input type="button" value="复制" id="copy"><input type="button" value="还原" id="restore">
    <div class="show3" id="show3"></div>
    <input type="button" value="还原" id="rest">
    <input type="button" value="删除前三项" id="del3"><input type="button" value="删除二、三项" id="del4"><br>
    <input type="button" value="在第二项后插入(orange，purple)" id="insert1">
    <input type="button" value="替换第二项和第三项" id="btn1">
</body>

</html>
<script>
    var arr = ["January(1)", "February(2)", "March(3)", "April(4)", "May(5)", "June(6)", "July(7)", "Aguest(8)", "September(9)", "October(10)", "November(11)", "December (12)"]
    //遍历数组
    function asd(obj) {
        var a = ""
        for (var i = 0; i <= obj.length - 1; i++) {
            a = a + obj[i] + ","
        }
        return a
    }
    //打印数组
    var show1 = document.querySelector("#show1")
    show1.innerHTML = asd(arr);
    //删除january(1)
    var del1 = document.querySelector("#del1")
    del1.addEventListener("click", function () {
        arr.shift();//删除第一个元素
       
        var show1 = document.querySelector("#show1")
        show1.innerHTML =  asd(arr);
    })
     //删除january(1)
     var del2 = document.querySelector("#del2")
    del2.addEventListener("click", function () {
        arr.pop();//删除最后一个个元素
        var show1 = document.querySelector("#show1")
        show1.innerHTML =  asd(arr);
    })

   let arr1 = new Array(0,1,2, 3, 4,5,6,7,8,9);
   //初始化函数
   function a(obj){
    var a = 
    a=obj.join();
    return a;
   }
   //初始化
   var show2=document.querySelector("#show2")
   show2.innerHTML=a(arr1);
   var copy = document.querySelector("#copy")
   copy.addEventListener("click",function(){
    var b=show2.innerHTML+","+arr1.join();
    show2.innerHTML=b;
   })
   //还原
   var restore = document.querySelector("#restore")
   restore.addEventListener("click",function(){
   show2.innerHTML=a(arr1)
   })

   let arr2 = new Array("red","green","blue","white","yellow","black","brown");
   //初始化函数
   function c(obj){
    var a = 
    a=obj.join();
    return a;
   }
   //初始化
   var show3=document.querySelector("#show3")
   show3.innerHTML=c(arr2);

   //还原
   var rest = document.querySelector("#rest")
   rest.addEventListener("click",function(){
   arr2 =["red","green","blue","white","yellow","black","brown"];
   show3.innerHTML=c(arr2);
   })

   //删除前三项
   var del3 = document.querySelector("#del3")
   del3.addEventListener("click",function(){
   arr2.splice(0,3)
   show3.innerHTML=c(arr2);
   })
    //删除二到三项
    var del4 = document.querySelector("#del4")
    del4.addEventListener("click",function(){
   arr2.splice(1,3)
   show3.innerHTML=c(arr2);
   })
    //插入
    var insert1 = document.querySelector("#insert1")
    insert1.addEventListener("click",function(){
   arr2.splice(2,0,"orange","purple")
   show3.innerHTML=c(arr2);
   })
    //替换
    var btn1 = document.querySelector("#btn1")
    btn1.addEventListener("click",function(){
        console.log(arr2)
    arr2.splice(2,1,"green")
    arr2.splice(1,1,"blue")
    show3.innerHTML=c(arr2);
   })
</script>